<template>
  <div class="grids"  :style="gridStyles">
    <div v-for="(item,index) in gridNum" :key="index"  class="grid">
    </div>
  </div>
</template>

<script setup>
import { ref,computed,onMounted } from "vue";
import { animate, utils, stagger } from  'animejs';

let rowNum = ref(0);
let colNum = ref(0);
let gridNum = ref(10);
const gridStyles = computed(() => ({
  gridTemplateColumns: `repeat(${colNum.value}, 1fr)`,
  gridTemplateRows: `repeat(${rowNum.value}, 1fr)`
}));
function updateSizeInfo() {
  let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
  creatGrid(windowWidth, windowHeight);
  // addClickEvent();
}

// 窗口大小改变时实时更新大小信息
window.addEventListener("resize", updateSizeInfo);

function creatGrid(width, height) {
  rowNum.value = Math.floor(height / 100);
  colNum.value = Math.floor(width / 100);
  gridNum.value = rowNum.value * colNum.value;
  console.log("窗口大小改变");
  console.log(gridNum.value);
}


function animateGrid() {
  animate(".grid", {
    opacity: [
      { to: 0, duration: 0 },
      { to: 1, duration: 500 }
    ],
    // backgroundColor:[
    //   {to:'#000',duration:500}
    // ],
    rotate:[
      {to:360,duration:500}
    ],
    delay: stagger(50, {
      grid: [colNum.value, rowNum.value],
      from: utils.random(0, rowNum.value * colNum.value - 1)
    }),
    ease: "inOutSine",
    onComplete: () => {
      console.log("动画完成");
      setTimeout(() => {
        // animateGrid();
      }, 300);
    }
  });
}

updateSizeInfo();
defineExpose({animateGrid});
onMounted(()=>{
  animateGrid();
})
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.grids {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  display: grid;
  width: 100vw;
  height: 100vh;
}

.grid {
  border: 1px solid black;
}
</style>
